<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <!-- 搜索栏 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <el-button type="primary" @click="isShowDialog = true">添加房产</el-button>
          </el-col>
          <el-col :span="12">
            <el-row type="flex">
              <el-col>
                <el-select v-model="inputValue" placeholder="请选择分类" style="width:150px" @change="changeCategory">
                  <el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.title" />
                </el-select>
              </el-col>
              <el-col>
                <el-select v-model="allBrokers" placeholder="请选择经纪" style="width:150px" @change="changeAgents">
                  <el-option v-for="item in agentList" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
              </el-col>
              <el-col>
                <el-input v-model="title_contains" placeholder="请输入关键字" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="search" />
                </el-input>
              </el-col>
            </el-row>

          </el-col>
        </el-row>
        <hr>
        <!-- 表格 -->
        <el-table border :data="tableData">
          <el-table-column label="封面" sortable="" align="center">
            <template #default="{row}">
              <img :src="row.image" alt="" class="staffPhoto" style="border-radius: 50%; width: 100px; height: 100px; padding: 10px">
            </template>
          </el-table-column>
          <el-table-column label="标题" sortable="" prop="title" />
          <el-table-column label="标签" align="center" prop="tags" />
          <el-table-column
            label="地址"
            sortable=""
            prop="address"
          />
          <el-table-column
            label="分类"
            sortable=""
            prop="category.title"
          />
          <el-table-column
            label="经纪"
            sortable=""
            prop="agent.name"
          />
          <el-table-column
            label="价格"
            sortable=""
            prop="price"
          />
          <el-table-column
            label="介绍"
            sortable=""
            prop="desc"
          />
          <el-table-column label="图片" sortable="" align="center">
            <template #default="{row}">

              <img v-for="(item,index) in row.photos" :key="index" :src="item" alt="" class="staffPhoto" style="width: 100px; height: 100px; padding: 10px">
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280" align="center">
            <template #default="{row}">
              <el-button type="primary" @click="editData(row.id)">编辑</el-button>
              <el-button type="danger" @click="btnDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <hr>
        <!-- 分页 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev,pager,next"
            :total="total"
            :page-size="page._limit"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <!-- 弹窗 -->
      <property-edit
        ref="editProperty"
        :is-show-dialog.sync="isShowDialog"
        :agent-list="agentList"
        :category-list="categoryList"
        @update="update"
        @add="add"
      />
    </div>
  </div>
</template>

<script>
import { getPropertiesList, getCategoryList, delPropertiesById, getPropertiesCount } from '@/api/property'
import { getAgentsList } from '@/api/agents'
import propertyEdit from './component/property-edit.vue'
export default {
  components: { propertyEdit },
  data() {
    return {
      classifications: '',
      inputValue: '',
      allBrokers: '',
      inputVisible: false,
      input3: '',
      select: '',
      isShowDialog: false,
      total: 0,
      title_contains: '',
      tableData: [],
      agentList: [],
      categoryList: [],
      page: {
        _start: 0,
        _limit: 5
      }
    }
  },
  created() {
    this.getPropertiesList()
    this.getAgentsList()
    this.getCategoryList()
    this.getPropertiesCount()
  },
  methods: {
    // 获取房产数量
    async getPropertiesCount() {
      const { data } = await getPropertiesCount()
      this.total = data
      // console.log(this.total, 'tt')
    },
    // 获取分类列表渲染
    async getCategoryList() {
      const { data } = await getCategoryList()
      this.categoryList = data
    },
    // 获取表格数据渲染
    async getPropertiesList() {
      const { data } = await getPropertiesList(this.page)
      this.tableData = data
      // console.log(data, '?')
    },
    // 获取经纪人列表
    async getAgentsList() {
      const { data } = await getAgentsList()
      this.agentList = data
      // console.log(this.agentList, '经济列表')
    },
    // 编辑事件
    editData(data) {
      this.isShowDialog = true
      // console.log(data, '??')
      this.$nextTick(() => {
        this.$refs.editProperty.getPropertiesById(data)
      })
      // this.$refs.editProperty.getPropertiesById(data)
    },
    // 子传父事件
    update() {
      this.isShowDialog = false
      this.getPropertiesList()
    },
    // 子传父
    add() {
      this.isShowDialog = false
      this.getPropertiesList()
    },

    // 删除事件
    async btnDel(id) {
      try {
        await this.$confirm('确定要删除该房产吗?')
        await delPropertiesById(id)
        await this.$message.success('删除成功')
        this.getPropertiesList()
      } catch (error) {
        console.log(error)
      }
    },
    // 分页
    async currentChange(val) {
      // console.log(val, 199)
      this.page._start = (val - 1) * this.page._limit
      if (this.title_contains) {
        this.page.title_contains = this.title_contains
      }
      if (this.inputValue) {
        this.page.category = this.inputValue
      }
      if (this.allBrokers) {
        this.page.agent = this.allBrokers
      }
      const { data } = await getPropertiesList(this.page)
      this.tableData = data
      // console.log(val, '分页回调', 197)
      // this.start = this.limit * (val - 1)
      // const { data } = await getPropertiesList({ _start: this.start, _limit: this.limit })
      // this.tableData = data
    },
    // 搜索
    async search() {
      this.inputValue = ''
      this.allBrokers = ''
      if (!this.title_contains) {
        this.page._start = 0
        await this.getPropertiesList()
        return
      }
      this.page._start = 0
      const { data } = await getPropertiesList({
        ...this.page,
        title_contains: this.title_contains
      })
      const res = await getPropertiesCount({
        ...this.page,
        title_contains: this.title_contains
      })
      this.total = res.data
      this.tableData = data
    },
    // 分类
    async changeCategory(val) {
      console.log(val)
      this.allBrokers = ''
      this.title_contains = ''
      if (!this.inputValue) {
        this.page._start = 0
        const { data } = await getPropertiesList()
        this.categoryList = data
        return
      }
      this.page._start = 0
      const { data } = await getPropertiesList({
        ...this.page,
        category: val
      })
      const res = await getPropertiesCount({
        ...this.page,
        category: val
      })
      // console.log(res, 258)
      this.total = res.data
      this.tableData = data
    },
    // 经纪
    async changeAgents(val) {
      // console.log(val)
      this.title_contains = ''
      this.inputValue = ''
      if (!this.allBrokers) {
        this.page._start = 0
        const { data } = await getPropertiesList()
        this.categoryList = data
        return
      }
      this.page._start = 0
      const { data } = await getPropertiesList({
        ...this.page,
        agent: val
      })
      const res = await getPropertiesCount({
        ...this.page,
        agent: val
      })
      // console.log(res, 258)
      this.total = res.data
      this.tableData = data
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
